<!-- forget_password -->
<template>
  <div class="app_contain">
    <div class="contain">
      <header></header>
      <div class="center">
        <div class="login_card">
          <img src="@/assets/img/logo.svg" alt="logo" />
          <el-steps :active="1" finish-status="success" align-center>
            <el-step title="选择账户"></el-step>
            <el-step title="安全验证"></el-step>
          </el-steps>
          <el-input
            placeholder="请输入验证码"
            v-model="captcha"
            hidden
            autocomplete="new-password"
          ></el-input>
          <el-button
            type="primary"
            plain
            @click="send_captcha"
            style="margin-top: 10px"
            :disabled="isDisabled"
            >{{ buttonName }}</el-button
          >
          <div class="tip_text">新密码</div>
          <el-input
            placeholder="请输入密码"
            v-model="password"
            hidden
            autocomplete="new-password"
            show-password
          >
          </el-input>
          <div class="tip_text">再次输入新密码</div>
          <el-input
            placeholder="请再次输入密码"
            v-model="password_again"
            hidden
            autocomplete="new-password"
            show-password
          >
          </el-input>
          <div class="login_btn_contain" @click="next">下一步</div>
        </div>
      </div>
      <footer></footer>
    </div>
  </div>
</template>

<script>
export default {
  name: "forget_password_captcha",
  data() {
    return {
      CountDown: 60,
      buttonName: "发送验证码",
      isDisabled: false,
      captcha: "",
      password: "",
      password_again: "",
      isPhone: false,
      check_account_phone:
        /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
      captcha_id: "",
    };
  },
  methods: {
    send_captcha() {
      const account = JSON.parse(
        sessionStorage.getItem("forget_password_user_info")
      ).account;
      if (account) {
        //先把按钮禁止，并进行倒计时，防止网速慢的用户重复点击
        this.isDisabled = true;
        let timerId = setInterval(() => {
          this.CountDown--;
          this.buttonName = this.CountDown + "秒后重试";
          if (this.CountDown <= 0) {
            clearInterval(timerId);
            this.buttonName = "重新发送";
            this.CountDown = 60;
            this.isDisabled = false;
          }
        }, 1000);
        //操作验证发送API BLOCK
        if (this.check_account_phone.test(account)) {
          this.$store
            .dispatch("login/sms", account)
            .then((data) => {
              this.$message.success(data);
            })
            .catch((error) => {
              // this.$message.error("验证码发送失败，请重试");
              clearInterval(timerId);
              this.buttonName = "重新发送";
              this.CountDown = 60;
              this.isDisabled = false;
            });
          this.isPhone = true;
        } else {
          this.$store
            .dispatch("login/email", account)
            .then((data) => {
              this.$message.success(data);
            })
            .catch((error) => {
              // this.$message.error("验证码发送失败，请重试");
              clearInterval(timerId);
              this.buttonName = "重新发送";
              this.CountDown = 60;
              this.isDisabled = false;
            });
        }
      } else {
        this.$message.warning("请返回上一步完善信息");
      }
    },
    next() {
      if (!this.captcha) {
        this.$message({
          message: "请输入验证码",
          type: "warning",
        });
      } else if (!this.password) {
        this.$message({
          message: "请输入密码",
          type: "warning",
        });
      } else if (!this.password_again) {
        this.$message({
          message: "请再次输入密码",
          type: "warning",
        });
      } else {
        if (this.password_again !== this.password) {
          this.$message({
            message: "两次密码不一致",
            type: "error",
          });
        } else {
          let forget_password_user_info = JSON.parse(
            sessionStorage.getItem("forget_password_user_info")
          );
          forget_password_user_info.password = this.password;
          forget_password_user_info.captcha = this.captcha;
          forget_password_user_info.captcha_id =
            this.$store.state.login.captcha_id;
          if (this.isPhone) {
            this.$store
              .dispatch("login/forget_user_byphone", forget_password_user_info)
              .then((data) => {
                this.$notify.success({
                  title: "提示",
                  message: "密码重置成功",
                  showClose: false,
                });
                sessionStorage.removeItem("forget_password_user_info");
                sessionStorage.removeItem("forget_password_countdown_info");
                this.$store.state.login = {};
                this.$router.push("/login");
              });
          } else {
            this.$store
              .dispatch("login/forget_user_byemail", forget_password_user_info)
              .then((data) => {
                this.$notify.success({
                  title: "提示",
                  message: "密码重置成功",
                  showClose: false,
                });
                sessionStorage.removeItem("forget_password_user_info");
                sessionStorage.removeItem("forget_password_countdown_info");
                this.$store.state.login = {};
                this.$router.push("/login");
              });
          }
        }
      }
    },
  },
  created() {
    //从sessionStorage中读取倒计时相关信息
    if (sessionStorage.getItem("forget_password_countdown_info")) {
      this.CountDown = JSON.parse(
        sessionStorage.getItem("forget_password_countdown_info")
      ).CountDown;
      this.isDisabled = JSON.parse(
        sessionStorage.getItem("forget_password_countdown_info")
      ).isDisabled;
      this.captcha_id = JSON.parse(
        sessionStorage.getItem("forget_password_countdown_info")
      ).captcha_id;
      this.$store.state.login.captcha_id = this.captcha_id;
    }
    //进入该页面时，若倒计时还在进行，则继续跑倒计时
    if (this.isDisabled) {
      let timerId = setInterval(() => {
        this.CountDown--;
        this.buttonName = this.CountDown + "秒后重试";
        if (this.CountDown <= 0) {
          clearInterval(timerId);
          this.buttonName = "重新发送";
          this.CountDown = 60;
          this.isDisabled = false;
        }
      }, 1000);
    }
    let isPhone =
      JSON.parse(sessionStorage.getItem("forget_password_countdown_info"))
        .isPhone === null
        ? false
        : JSON.parse(sessionStorage.getItem("forget_password_countdown_info"))
            .isPhone;

    if (isPhone) {
      this.isPhone = isPhone;
    }
    
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem(
        "forget_password_countdown_info",
        JSON.stringify({
          CountDown: this.CountDown,
          isDisabled: this.isDisabled,
          isPhone: this.isPhone,
          captcha_id: this.$store.state.login.captcha_id,
        })
      );
    });
  },
  beforeRouteLeave(to, from, next) {
    /*
      隶属于 Vue-Router
      to:router 即将要进入的路由对象
      from:router  当前导航正要离开的路由
      next()进行管道中的下一个钩子
      最后要确保调用next方法，否则钩子不会被resolved
    */
    sessionStorage.setItem(
      "forget_password_countdown_info",
      JSON.stringify({
        CountDown: this.CountDown,
        isDisabled: this.isDisabled,
        isPhone: this.isPhone,
        captcha_id: this.$store.state.login.captcha_id,
      })
    );
    next();
  },
};
</script>

<style lang='scss' scoped>
@import "@/assets/css/login.scss";
.tip_text {
  color: rgba(0, 0, 0, 0.6);
}
.el-input {
  margin-top: 6px !important;
}
</style>